<template>
	<div class="bg">
		<div class="header">
			<span class="header-text">拾一块数据可视化管理</span>
		</div>
		<div class="content">
			<div class="left">
				<div class="region">
					<div class="region-title">
						<div class="border">
							<span>回收热门区域</span>
						</div>
					</div>
					<div class="region-content">
						<div class="border">
							<div id="chart-container">

							</div>
						</div>
					</div>
				</div>
				<div class="recycle">
					<div class="recycle-title">
						<div class="border">
							<span>回收事件详情</span>
						</div>
					</div>
					<div class="recycle-content">

						<div class="border">
							<div class="tbh">
								<table class="table-header">
									<thead>
										<tr>
											<th class="heard1">下单时间</th>
											<th class="heard2">顾客姓名</th>
											<th class="heard3">地址</th>
											<th class="heard4">状态</th>
										</tr>
									</thead>
								</table>
							</div>

							<div class="table-content">
								<vue-seamless-scroll :data="orders" class="seamless-warp" style="width: 100%">
									<table class="table">
										<tbody>
											<tr v-for="order,i in orders" :key="i"
												:class="getStatusClass(order.status)">
												<td class="td1">{{ order.createTime }}</td>
												<td class="td2">{{ order.userName }}</td>
												<td class="td3">{{ order.recycleAddress }}</td>
												<td class="td4">{{ order.flag }}</td>
											</tr>
										</tbody>
									</table>
								</vue-seamless-scroll>
							</div>

						</div>
					</div>
				</div>
			</div>
			<div class="middle">
				<div class="tendency">
					<div class="tendency-title">
						<div class="border">
							<span>诉求变化量趋势</span>
						</div>
					</div>
					<div class="tendency-content">
						<div class="border">
							<div id="lineChart"></div>
						</div>
					</div>
				</div>

				<div class="sport">
					<div class="card1">
						<div class="up">234</div>
						<div class="down">线上商品</div>
					</div>
					<div class="card2">
						<div class="up">1234</div>
						<div class="down">服务用户</div>
					</div>
					<div class="card3">
						<div class="up">2134</div>
						<div class="down">处理垃圾</div>
					</div>
					<div class="card4">
						<div class="up">24</div>
						<div class="down">开设门店</div>
					</div>
					<div class="card5">
						<div class="up">3234</div>
						<div class="down">超值换购</div>
					</div>
					<div class="background-image">

					</div>
				</div>

			</div>
			<div class="right">
				<div class="store">
					<div class="store-title">
						<div class="border">
							<span>门店回收数量</span>
						</div>
					</div>
					<div class="store-content">
						<div class="border">
							<div id="barChart"></div>
						</div>
					</div>
				</div>
				<div class="player">
					<div class="player-title">
						<div class="border">
							<span>回收员回收排行榜</span>
						</div>
					</div>
					<div class="player-content">
						<div class="border">
							<div class="schedule">
								<gradient-progress :progress="progress1" color1="#FE5555" color2="#FE5555">
									<div class="fat"><span class="s1">1</span>昆工回收员</div>
								</gradient-progress>
								<gradient-progress :progress="progress2" color1="#FFCC33" color2="#FFCC33">
									<div class="fat"><span class="s2">2</span>雨花毓秀回收员</div>
								</gradient-progress>
								<gradient-progress :progress="progress3" color1="#13FDCE" color2="#13FDCE">
									<div class="fat"><span class="s3">3</span>翰林大关回收员</div>
								</gradient-progress>
								<gradient-progress :progress="progress4" color1="#72EDE3" color2="#A08EFF">
									<div class="fat"><span class="s0">4</span>新天地回收员</div>
								</gradient-progress>
								<gradient-progress :progress="progress5" color1="#72EDE3" color2="#A08EFF">
									<div class="fat"><span class="s0">5</span>云师大回收员</div>
								</gradient-progress>
								<gradient-progress :progress="progress6" color1="#72EDE3" color2="#A08EFF">
									<div class="fat"><span class="s0">6</span>时代俊园回收员</div>
								</gradient-progress>
								<gradient-progress :progress="progress7" color1="#72EDE3" color2="#A08EFF">
									<div class="fat"><span class="s0">7</span>下庄回收员</div>
								</gradient-progress>
								<gradient-progress :progress="progress8" color1="#72EDE3" color2="#A08EFF">
									<div class="fat"><span class="s0">8</span>仕林街回收员</div>
								</gradient-progress>
							</div>


						</div>
					</div>
				</div>
				<div class="satisfaction">
					<div class="satisfaction-title">
						<div class="border">
							<span>用户满意度统计</span>
						</div>
					</div>
					<div class="satisfaction-content">
						<div class="border">
							<div class="circel1">
								<circle-percent circleStyle="#0DFFD4 " bgColor="#31A46D " percent="70"></circle-percent>
								<div class="text">满意</div>
							</div>
							<div class="circel2">
								<circle-percent circleStyle="#A08430 " bgColor="#A08430 " percent="20"></circle-percent>
								<div class="text">一般</div>
							</div>
							<div class="circel3">
								<circle-percent circleStyle="#CB5861 " bgColor="#CB5861 " percent="10"></circle-percent>
								<div class="text">不满意</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>
<script>
	// import BarCharts from "@/views/charts/components/simple/bar.vue"
	import * as echarts from 'echarts';
	import vueSeamlessScroll from 'vue-seamless-scroll'
	import gradientProgress from '@/components/gradient-progress/gradient-progress.vue'
	import CirclePercent from '@/components/circle-percent/circle-percent.vue'
	import OrderApi from '@/common/finding/OrderApi.js';

	export default {
		name: 'Example01Basic',
		components: {
			vueSeamlessScroll,
			gradientProgress,
			CirclePercent
		},
		data() {
			return {
				progress1: 98,
				progress2: 88,
				progress3: 78,
				progress4: 68,
				progress5: 58,
				progress6: 48,
				progress7: 38,
				progress8: 28,
				orders: [],


			}
		},
		mounted() {
			this.initChart();
			this.lineChart();
			this.barChart();
			OrderApi.queryAllOrder().then(res => {
				console.log('后台查询全部预约', res.data.data);
				this.orders = res.data.data
				for (var i = 0; i < this.orders.length; i++) {
					if (this.orders[i].flag === 0) {
						this.orders[i].flag = '待收取'
					} else if (this.orders[i].flag === 1) {
						this.orders[i].flag = '已完成'
					} else if (this.orders[i].flag === 2) {
						this.orders[i].flag = '已取消'
					} else {
						this.orders[i].flag = '已接单'
					}


				}


			})

		},

		computed: {

		},
		methods: {


			getStatusClass(status) {
				if (status === '已完成') {
					return 'green';
				} else if (status === '已取消') {
					return 'red';
				} else if (status === '待确认') {
					return 'yellow';
				} else {
					return '';
				}
			},
			barChart() {
				var chartDom = document.getElementById('barChart');
				var myChart = echarts.init(chartDom, 'dark');
				var option;

				option = {
					xAxis: {
						type: 'category',
						data: ['昆工店', '雨花毓秀店', '翰林大关店', '新天地店', '云师大店', '时代俊园店', '下庄店', ]
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [120, 200, 150, 80, 360, 300, 130],
						type: 'bar'
					}]
				};

				option && myChart.setOption(option);

			},


			lineChart() {
				var chartDom = document.getElementById('lineChart');
				var myChart = echarts.init(chartDom, 'dark');
				var option;

				option = {
					color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
					title: {
						text: ''
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6affff'
							}
						}
					},
					legend: {
						data: ['Line 1']
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: ['3月', '4月', '5月', '6月', '7月', '8月', '9月', ]
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: 'Line 1',
						type: 'line',
						stack: 'Total',
						smooth: true,
						lineStyle: {
							width: 0
						},
						showSymbol: false,
						areaStyle: {
							opacity: 0.8,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgb(128, 255, 165)'
								},
								{
									offset: 1,
									color: 'rgb(1, 191, 236)'
								}
							])
						},
						emphasis: {
							focus: 'series'
						},
						data: [140, 232, 101, 264, 90, 340, 250]
					}]
				};

				option && myChart.setOption(option);

			},
			initChart() {
				var chartDom = document.getElementById('chart-container');
				var myChart = echarts.init(chartDom, 'dark');
				var option;

				option = {
					title: {
						text: ''
					},
					legend: {
						data: ['回收数量', '回收次数']
					},
					radar: {
						// shape: 'circle',
						indicator: [{
								name: '盘龙区',
								max: 6500
							},
							{
								name: '西山区',
								max: 16000
							},
							{
								name: '五华区',
								max: 30000
							},
							{
								name: '官渡区',
								max: 38000
							},
							{
								name: '呈贡区',
								max: 52000
							},
						],
						center: ['50%', '55%'],
						radius: 100
					},
					series: [{
						name: 'Budget vs spending',
						type: 'radar',
						data: [{
								value: [4200, 3000, 20000, 35000, 50000],
								name: '回收数量'
							},
							{
								value: [5000, 14000, 28000, 26000, 42000],
								name: '回收次数'
							}
						]
					}]
				};

				option && myChart.setOption(option);
			}
		},
	}
</script>

<style scoped lang="scss">
	@import "~@/assets/styles/mixin.scss";
	@import "~@/assets/styles/variables.scss";

	.text {
		color: #fff;
		text-align: center;
		margin-top: 5px;
	}

	.circel1 {
		margin-right: 10px;
	}

	.circel2 {
		margin-right: 10px;
	}

	.satisfaction-content {
		margin-top: 15px;
		width: 400px;
		height: 150px;
		border: 1px solid #1F6C90;
		background-color: #1F6C90;

		.border {
			background-color: #000;
			width: 398px;
			height: 148px;
			border: 1px solid #1F6C90;
			border-radius: 15px;
			display: flex;
			padding: 10px 20px;
		}
	}

	.satisfaction {
		margin-top: 15px;

		.satisfaction-title {
			height: 20px;
			width: 110px;
			color: #3079EC;
			border: 1px solid #1F6C90;
			background-color: #1F6C90;

			.border {
				background-color: #000;
				height: 18px;
				width: 108px;
				border: 1px solid #1F6C90;
				border-radius: 8px;

				span {
					display: block;
					text-align: center;
					line-height: 18px;
				}
			}
		}
	}

	.fat {
		display: flex;
		height: 20px;
		align-items: center;
		width: 100px;
	}

	.s1 {
		color: #fff;
		border-radius: 50%;
		background-color: #FE5555;
		display: block;
		width: 12px;
		height: 12px;
		text-align: center;
		line-height: 12px;
		margin-right: 3px;

	}

	.s2 {
		color: #fff;
		border-radius: 50%;
		background-color: #FFCC33;
		display: block;
		width: 12px;
		height: 12px;
		text-align: center;
		line-height: 12px;
		margin-right: 3px;

	}

	.s3 {
		color: #fff;
		border-radius: 50%;
		background-color: #13FDCE;
		display: block;
		width: 12px;
		height: 12px;
		text-align: center;
		line-height: 12px;
		margin-right: 3px;

	}

	.s0 {
		color: #fff;
		border-radius: 50%;
		background-color: #A08EFF;
		display: block;
		width: 12px;
		height: 12px;
		text-align: center;
		line-height: 12px;
		margin-right: 3px;

	}

	.schedule {
		margin-top: 15px;
	}

	.player-content {
		margin-top: 15px;
		width: 400px;
		height: 200px;
		border: 1px solid #1F6C90;
		background-color: #1F6C90;

		.border {
			background-color: #000;
			width: 398px;
			height: 198px;
			border: 1px solid #1F6C90;
			border-radius: 15px;
		}
	}

	.player {
		margin-top: 15px;

		.player-title {
			height: 20px;
			width: 110px;
			color: #3079EC;
			border: 1px solid #1F6C90;
			background-color: #1F6C90;

			.border {
				background-color: #000;
				height: 18px;
				width: 108px;
				border: 1px solid #1F6C90;
				border-radius: 8px;

				span {
					display: block;
					text-align: center;
					line-height: 18px;
				}
			}
		}
	}

	#barChart {
		width: 396px;
		height: 246px;
	}

	.store-content {
		margin-top: 15px;
		width: 400px;
		height: 250px;
		border: 1px solid #1F6C90;
		background-color: #1F6C90;

		.border {
			background-color: #000;
			width: 398px;
			height: 248px;
			border: 1px solid #1F6C90;
			border-radius: 15px;
		}
	}

	.right {
		margin-right: 15px;

	}

	.store {
		.store-title {
			height: 20px;
			width: 100px;
			color: #3079EC;
			border: 1px solid #1F6C90;
			background-color: #1F6C90;

			.border {
				background-color: #000;
				height: 18px;
				width: 98px;
				border: 1px solid #1F6C90;
				border-radius: 8px;

				span {
					display: block;
					text-align: center;
					line-height: 18px;
				}
			}
		}
	}

	.up,
	{
	animation: colorChange 1s infinite;
	font-weight: bold;
	}

	.down {
		animation: colorChangedown 1s infinite;
		font-weight: bold;
	}

	@keyframes colorChange {

		0% {
			color: #66FFFF;
		}

		50% {
			color: #1E5086;
		}

		100% {
			color: #66FFFF;
		}

	}

	@keyframes colorChangedown {

		0% {
			color: #4C5086;
		}

		50% {
			color: #FFF;
		}

		100% {
			color: #4C5086;
		}

	}

	.up {
		text-align: center;
	}

	.sport {
		position: relative;
		margin-top: 30px;
		width: 100%;
		color: #66FFFF;
		font-size: 15px;
	}

	.card1 {
		position: absolute;
		top: 100px;
	}

	.card2 {
		position: absolute;
		top: 200px;
		left: 30px;
	}

	.card3 {
		position: absolute;
		top: 0;
		left: 140px;
	}

	.card4 {
		position: absolute;
		top: 100px;
		right: 0;
	}

	.card5 {
		position: absolute;
		top: 200px;
		right: 30px;
	}

	.background-image {
		background-image: url('../../assets/images/index.png');
		background-size: cover;
		margin: 0 auto;

		width: 300px;
		height: 300px;
		animation: rotate 5s infinite linear;
		transform-origin: center center;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	#lineChart {
		margin: 0 auto;
		margin-top: 4px;
		width: 385px;
		height: 285px;
		background-color: #041830;
	}

	.tendency-content {
		margin-top: 15px;
		width: 400px;
		height: 300px;
		border: 1px solid #1F6C90;
		background-color: #1F6C90;

		.border {
			background-color: #000;
			width: 398px;
			height: 298px;
			border: 1px solid #1F6C90;
			border-radius: 15px;
		}
	}

	.tendency {
		.tendency-title {
			height: 20px;
			width: 100px;
			color: #3079EC;
			border: 1px solid #1F6C90;
			background-color: #1F6C90;

			.border {
				background-color: #000;
				height: 18px;
				width: 98px;
				border: 1px solid #1F6C90;
				border-radius: 8px;

				span {
					display: block;
					text-align: center;
					line-height: 18px;
				}
			}
		}

	}

	.content {
		display: flex;
		justify-content: center;
		// position: absolute;
		// top:80px
	}

	.middle {
		margin: 0 15px;
	}

	.table-header {
		width: 100%;
		height: 20px;
		color: #fff;
		padding: 0 10px;

		thead {
			background-color: #005EA9;

			.heard1,
			.heard3 {
				width: 33%;
			}

			.heard2,
			.heard4 {
				width: 16%;
			}

		}
	}

	.table tr:nth-child(odd) {
		background-color: #03335E;
		/* 奇数行的背景色 */
	}

	.table tr:nth-child(even) {
		background-color: #062649;
		/* 偶数行的背景色 */
	}

	.green {
		color: #12EBC4;
	}

	.red {
		color: #FE5555;
	}

	.yellow {
		color: #FFCC33;
	}

	.table {
		margin-top: 7px;
		color: #fff;
		width: 100%;
		// table-layout: fixed;
		padding: 0 10px;

		tbody {

			.td1,
			.td3 {
				width: 33%;
			}

			.td2,
			.td4 {
				width: 16%;
			}

		}

		tbody {
			text-align: center;
		}
	}

	.recycle-content {
		margin-top: 15px;
		width: 400px;
		height: 350px;
		border: 1px solid #1F6C90;
		background-color: #1F6C90;

		.border {
			background-color: #000;
			width: 398px;
			height: 348px;
			border: 1px solid #1F6C90;
			border-radius: 15px;

			.tbh {
				width: 398px;
				height: 20px;
				margin-top: 10px;
			}

			.table-content {
				width: 398px;
				height: 310px;
				overflow-y: hidden;
			}
		}
	}

	.recycle {
		margin-top: 15px;

		.recycle-title {
			height: 20px;
			width: 100px;
			color: #3079EC;
			border: 1px solid #1F6C90;
			background-color: #1F6C90;

			.border {
				background-color: #000;
				height: 18px;
				width: 98px;
				border: 1px solid #1F6C90;
				border-radius: 8px;

				span {
					display: block;
					text-align: center;
					line-height: 18px;
				}
			}
		}
	}

	.left {
		margin-left: 15px;
		padding-bottom: 30px;

		.region {
			.region-title {
				height: 20px;
				width: 100px;
				color: #3079EC;
				border: 1px solid #1F6C90;
				background-color: #1F6C90;

				.border {
					background-color: #000;
					height: 18px;
					width: 98px;
					border: 1px solid #1F6C90;
					border-radius: 8px;

					span {
						display: block;
						text-align: center;
						line-height: 18px;
					}
				}

			}

			.region-content {
				margin-top: 15px;
				width: 400px;
				height: 300px;
				border: 1px solid #1F6C90;
				background-color: #1F6C90;

				.border {
					background-color: #000;
					width: 398px;
					height: 298px;
					border: 1px solid #1F6C90;
					border-radius: 15px;

					#chart-container {

						margin: 0 auto;
						margin-top: 4px;
						width: 385px;
						height: 285px;
						background-color: #041830;
					}
				}
			}
		}

	}


	.bg {
		font-size: 12px;
		background-color: #000;
		width: 100%;
		// height: 100vh;
		// position: relative;

	}

	.header {
		background-image: url(../../assets/images/header.png);
		height: 70px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		// width: calc(100% - #{$sideBarWidth});
		// position: fixed;
		// top: 84px;
		// right: 0;
		// z-index: 999;
		// transition: width 0.28s;


		.header-text {
			font-size: 22px;
			color: #fff;
			font-weight: bold;
			display: block;
			text-align: center;
			padding-top: 15px;

		}
	}
</style>